<script lang="ts" setup></script>

<!-- 布局容器 -->
<template>
  <div class="container-container">
    <p>
      用于布局的容器组件，方便快速搭建页面的基本结构：
      <br />
      el-container：外层容器。 当子元素中包含 el-header 或 el-footer
      时，全部子元素会垂直上下排列， 否则会水平左右排列。
      <br />
      el-header：顶栏容器。
      <br />
      el-aside：侧边栏容器。
      <br />
      el-main：主要区域容器。
      <br />
      el-footer：底栏容器。
    </p>
    <div class="layout">
      <div class="common-layout">
        <el-container>
          <el-header>Header</el-header>
          <el-main>Main</el-main>
        </el-container>
      </div>
    </div>
    <hr />
    <div class="layout">
      <div class="common-layout">
        <el-container>
          <el-header>Header</el-header>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </div>
    </div>
    <hr />
    <div class="layout">
      <div class="common-layout">
        <el-container>
          <el-aside width="200px">Aside</el-aside>
          <el-main>Main</el-main>
        </el-container>
      </div>
    </div>
    <hr />
    <div class="layout">
      <div class="common-layout">
        <el-container>
          <el-header>Header</el-header>
          <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-main>Main</el-main>
          </el-container>
        </el-container>
      </div>
    </div>
    <hr />
    <div class="layout">
      <div class="common-layout">
        <el-container>
          <el-header>Header</el-header>
          <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
              <el-main>Main</el-main>
              <el-footer>Footer</el-footer>
            </el-container>
          </el-container>
        </el-container>
      </div>
    </div>
    <hr />
    <div class="layout">
      <div class="common-layout">
        <el-container>
          <el-aside width="200px">Aside</el-aside>
          <el-container>
            <el-header>Header</el-header>
            <el-main>Main</el-main>
          </el-container>
        </el-container>
      </div>
    </div>
    <hr />
    <div class="layout">
      <div class="common-layout">
        <el-container>
          <el-aside width="200px">Aside</el-aside>
          <el-container>
            <el-header>Header</el-header>
            <el-main>Main</el-main>
            <el-footer>Footer</el-footer>
          </el-container>
        </el-container>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container-container {
  padding: 20px;
}
.layout {
  width: 60%;
  margin: 0 auto;
}
.el-header {
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
  text-align: center;
}
.el-main {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-text-color-primary);
  text-align: center;
  height: 150px;
}
.el-footer {
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
  text-align: center;
}
.el-aside {
  background-color: var(--el-color-primary-light-8);
  color: var(--el-text-color-primary);
  text-align: center;
}
</style>
